<!-- 商家财务列表 -->
<template>
  <div class="account-detail pd-12">
    <el-card >
      <!-- <p>共计入驻商家：0户</p> -->
      <el-form class="query-form" inline label-width="75px">
        <el-form-item label="商家名称:">
          <el-input v-model="query.title"></el-input>
        </el-form-item>
        <el-form-item label="手机号:">
          <el-input v-model="query.phone"></el-input>
        </el-form-item>
        <el-form-item label="时间:">
          <el-date-picker v-model="times" type="daterange" range-separator="~" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD" @change="changeTime" />
        </el-form-item>
        <el-form-item label="行业:" class="elselect">
          <el-select clearable v-model="query.status">
            <el-option
              v-for="item in typesList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="pd-12" @click="getListData">搜索</el-button>
        </el-form-item>

      </el-form>
    </el-card>

    <el-table class="mgt-15" :data="tableList" row-key="id" border @selection-change="onSelectionChange">
      <el-table-column label="ID" prop="id" />
      <el-table-column label="店铺名称" prop="name" />
      <el-table-column label="行业" prop="industry_id" />
      <el-table-column label="联系人" prop="name" />
      <el-table-column label="手机号" prop="phone" />
      <el-table-column label="总流水" prop="monthly_fee" />
      <!-- <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button type="primary" @click="handleEdit(scope.row)">详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination v-model:current-page="query.page" v-model:page-size="query.limit" :total="total"
      @current-change="getListData" />
  </div>
</template>

<script>
import { reactive, toRefs, toRaw, onMounted } from 'vue'
import { getbill } from '@/api/store.js'

export default {
  setup () {
    const state = reactive({
      query: {
        page: 1,
        limit: 10
      },
      total: 0, // 总条数
      tableList: [],
      selection: [], // 选择的数据
      times: '', // 时间
      typesList: [
        { label: '全部行业', value: 1 },
        { label: '鞋靴行业', value: 2 },
        { label: '手机数码', value: 3 },
        { label: '家用电器', value: 4 },
        { label: '玩具乐器', value: 5 },
        { label: '家居厨具', value: 6 },
        { label: '家具家装', value: 7 },
        { label: '美妆护肤', value: 8 },
        { label: '宠物生活', value: 9 },
        { label: '钟表珠宝', value: 10 },
        { label: '建材行业', value: 11 }
      ]
    })
    onMounted(() => {
      getListData()
    })
    const handleEdit = (data) => {
      console.log(data)
    }
    // 获取列表数据
    const getListData = async () => {
      try {
        const params = toRaw(state.query)
        const res = await getbill(params)
        console.log(res)
        state.tableList = res.data
        state.total = res.total
      } catch (e) {
        console.log(e)
      }
    }
    // 列表多选回调
    const onSelectionChange = (selection) => {
      state.selection = selection
      console.log(state.selection.length)
    }
    // 时间
    const changeTime = () => {
      console.log(state.times)
      state.query.start_time = state.times[0]
      state.query.end_time = state.times[1]
    }

    return {
      ...toRefs(state),
      handleEdit,
      getListData,
      onSelectionChange,
      changeTime
    }
  }
}
</script>

<style lang="scss" scoped>
.account-detail {
  .top-sum-detail {
    font-size: 14px;
    // color: #676a6c;
  }

  .query-form {
    :deep(.el-form-item) {
      margin-right: 15px !important;
    }

    :deep(.el-input__inner) {
      width: 150px;
      height: 25px;
    }

    // 时间
    :deep(.el-date-editor--daterange) {
      height: 26px;
    }
  }
}
</style>
